<script>
import * as chartConfig from '../chartconfig/config/component-config.js';
export default {
  name: 'ChartType',
  data() {
    return {
      allChartlist: [],
      chartState: false,
    };
  },
  computed: {
    currentControl() {
      return this.$store.getters.currentControl;
    },
  },
  watch: {
    currentControl(newVal) {
      this.chartlist = chartConfig[newVal.appearance.parentType];
      this.setType();
    },
  },
  mounted() {
    if (this.currentControl) {
      this.chartlist = chartConfig[this.currentControl.appearance.parentType];
      this.setType();
    }
  },
  methods: {
    setType() {
      this.allChartlist = [];
      if (this.currentControl) {
        const chartData = {
          dimension: this.currentControl.options.settings.dimension.length,
          metrics: this.currentControl.options.settings.metrics.length,
        };
        this.chartlist.forEach(item => {
          item = { ...item, ...chartData };
          this.allChartlist.push(item);
        });
      }
    },
    elementType(item) {
      this.$emit('on-selectChartType', {
        type: item.type,
        configType: item.id,
      });
    },
    computedType(item) {
      if (
        item.options.dimension.min <= item.dimension &&
        item.options.dimension.max >= item.dimension &&
        item.options.metrics.min <= item.metrics
      ) {
        if (item.options.metrics.max === 'infinite' || item.options.metrics.max >= item.metrics) {
          return false;
        } else {
          return true;
        }
      } else {
        return true;
      }
    },
  },
};
</script>

<template>
  <div class="datav-chart-type">
    <p>图表类型</p>
    <div class="all-chart-config">
      <span
        v-for="(item,index) in allChartlist"
        :key="index"
        :class="computedType(item)?'hand-disable':''"
        class="chart-type"
        @click="elementType(item)">
        <Tooltip
          :disabled="computedType(item)"
          placement="left"
          transfer>
          <img :src="item.img" >
          <div
            v-if="computedType(item)"
            class="disabled"
          >
          </div>
          <div slot="content">
            <span>{{ item.name }}</span>
            <div>{{ item.description }}</div>
          </div>
        </Tooltip>
      </span>
    </div>
  </div>
</template>

<style lang="less" scoped>
.datav-chart-type {
  width: 100%;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;

  p {
    margin: 10px;
  }

  .all-chart-config {
    width: 95%;
    margin: 0 auto;
  }
  .chart-type {
    display: inline-block;
    cursor: pointer;

    span {
      font-size: 8px;
    }

    .k-tooltip {
      img {
        padding: 5px;
        margin: 0 auto;
      }
    }
  }

  .hand-disable {
    pointer-events: none;
  }

  .disabled {
    position: absolute;
    top: 0;
    padding: 5px;
    width: 45px;
    height: 50px;
    background: #eee;
    overflow: hidden;
    opacity: 0.8;
  }

  .chart-type:hover {
    background-color: #fff;
  }
}
</style>
